<template>
	<view class="box_flex">
		<nav-ber :title="'文章详情页'"></nav-ber>
		<view class="title">{{ datas.title }}</view>
		<view class="conten_flex">
			<view class="user_font">
				<span>作者：{{ datas.author }}</span>
				<span>{{ datas.publicTime }}</span>
			</view>
			<view class="text_color" v-html="datas.content"></view>
		</view>
	</view>
</template>
<script>
	import { articleById } from '@/api/home.js'
	export default {
		data() {
			return {
				datas: {},
			}
		},
		onLoad(option) {
			// console.log('asdga1251', option)
			this.getdataBuyId(option.id)
		},
		onShow() {
			
		},
		methods: {
			getdataBuyId(id) {
				articleById(id).then((res) => {
					res.data.content = res.data.content.replace(/<img/g, '<img style="width: 100%"')
					this.datas = res.data
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.box_flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
		.title {
			font-size: 40rpx;
			font-weight: 900;
			margin: 10rpx 10rpx;
		}
		.conten_flex {
			flex: 1;
			overflow-x: hidden;
			overflow-y: scroll;
		}
		.user_font {
			margin: 20rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			span:first-child{
				color: #2979ff;
				background-color: rgba(3, 121, 255, .4);
				padding: 10rpx;
				border-radius: 10rpx;
			}
		}
		.text_color {
			color: gray;
			font-size: 26rpx;
			text-indent:24rpx;
			margin: 0 20rpx;
			padding: 8rpx;
			overflow-x:hidden;
			img {
				width: 100%;
			}
		}
	}
	
</style>
<style>
img {width: 100% !important;}
</style>